<template>
  <div style="width: 100%; height: 100%"></div>
</template>

<script>
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  MeshBasicMaterial,
  AmbientLight,
  SpotLight,
  SphereGeometry,
  PlaneGeometry,
  Vector3,
  Mesh,
  MeshNormalMaterial,
  FlatShading,
  ArrowHelper
} from 'three'
import Detector from 'three/examples/js/Detector'
export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      ele: null,
      width: 0,
      height:0,
      sphere: null
    }
  },
  mounted() {
    this.ele = this.$el
    this.width = this.$el.clientWidth
    this.height = this.$el.clientHeight

    if (!Detector.webgl) {
      const warning = Detector.getWebGLErrorMessage()
      this.ele.appendChild(warning)
    }
    this.threeStart()
  },
  methods: {
    threeStart () {
      this.initThree()
      this.initScene()
      this.initCamera()
      this.initPlane()
      this.addGeometry()
      this.initLight()
      this.render()
    },
    initThree () {
      this.renderer = new WebGLRenderer({
        antialias : true // 是否弱化锯齿特性，true表示弱化，更消耗cpu
      })
      this.renderer.setSize(this.width, this.height)
      this.ele.appendChild(this.renderer.domElement)
      this.renderer.setClearColor(0x000000)
    },
    initCamera () {
      this.camera = new PerspectiveCamera(45, this.width / this.height, 0.1, 1000)
      this.camera.position.set(-20, 30, 40)
      this.camera.lookAt(new Vector3(10, 0, 0))
    },
    initScene () {
      this.scene = new Scene()
    },
    initPlane () {
      const groundGeom = new PlaneGeometry(100, 100, 4, 4)
      const groundMesh = new Mesh(groundGeom, new MeshBasicMaterial({
        color: 0x777777
      }))

      groundMesh.rotation.x = -Math.PI / 2
      groundMesh.position.y = -20
      this.scene.add(groundMesh)
    },
    addGeometry () {
      const sphereGeometry = new SphereGeometry(14, 20, 20)
      const meshMaterial = new MeshNormalMaterial()
      meshMaterial.shading = FlatShading
      this.sphere = new Mesh(sphereGeometry, meshMaterial)
      this.sphere.position.x = 0
      this.sphere.position.y = 3
      this.sphere.position.z = 2
      for (var f = 0, fl = this.sphere.geometry.faces.length; f < fl; f++) {
        var face = this.sphere.geometry.faces[f]
        var centroid = new Vector3(0, 0, 0)
        centroid.add(this.sphere.geometry.vertices[face.a])
        centroid.add(this.sphere.geometry.vertices[face.b])
        centroid.add(this.sphere.geometry.vertices[face.c])
        centroid.divideScalar(3)

        var arrow = new ArrowHelper(
          face.normal,
          centroid,
          2,
          0x3333FF,
          0.5,
          0.5)
        this.sphere.add(arrow)
      }

      this.scene.add(this.sphere)
    },
    initLight () {
      const ambientLight = new AmbientLight(0x0c0c0c)
      this.scene.add(ambientLight)
    },
    render () {
      requestAnimationFrame(this.render)
      this.sphere.rotation.x += 0.01
      this.sphere.rotation.y += 0.01
      this.sphere.rotation.z += 0.01
      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>
